<template>
  <div>
    <div id="sale">
      <h2>今日销售额 菜品库存超出:0 菜品库存过低:0</h2>
      <div>0.00   今日总营收(元)</div>
      <div>0.00   今日优惠金额(元)</div>
      <div>0.00   今日订单数</div>
      <div>0.00   今日退款金额(元)</div>
    </div>
    <div>
      <h2>营业动态</h2>
      堂食订单(就餐中)
      <el-progress :percentage="50" :format="format"></el-progress>
      外卖订单(进行中)
      <el-progress :percentage="50" :format="format"></el-progress>
      当前预约人数
      <el-progress :percentage="50" :format="format"></el-progress>
      当前排号人数
      <el-progress :percentage="50" :format="format"></el-progress>
      <el-progress type="circle" :percentage="100" status="success">总营收</el-progress>
    </div>
    <h2>今日菜品销售排行榜</h2>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="dishId" label="菜品编号" width="180">
      </el-table-column>
      <el-table-column prop="dishName" label="菜品名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="单价" width="180"> </el-table-column>
      <el-table-column prop="saleNumber" label="销售笔数" width="180">
      </el-table-column>
      <el-table-column prop="salePrice" label="销售金额" width="180">
      </el-table-column>
      <el-table-column prop="discount" label="折扣额度" width="180">
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
#sale>div{
    width: 200px;
    height: 180px;
}
</style>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          dishId: '001',
          dishName: "小炒肉",
          price: 18,
          saleNumber: 10,
          salePrice: price * saleNumber,
          discount: 30,
        },
        {
          dishId: '002',
          dishName: "西红柿炒鸡蛋",
          price: 12,
          saleNumber: 5,
          salePrice: price * saleNumber,
          discount: 5,
        },
      ],
    };
  },
};
</script>